<template>
	<view class="bg">
		<image class="image" :src="bg" mode="aspectFit"></image>
		<view class="title">
			<text class="titleText">欢迎登录</text>
		</view>
		<view class="user" @click="wxlogin">
			<image class="wximage" src="../../static/icon/wx.png" mode="aspectFit"></image>
			<text class="text">微信登录</text>
		</view>
		<view class="tips">
			<radio class="radio" @click="radioChange" :checked="isAgree" />
			<text>查看</text>
			<text class="btn" @click="gotoUser">用户协议</text>
			<text>和</text>
			<text class="btn" @click="gotoPrivacy">隐私协议</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const isAgree = ref(false)
	const bg = ref('https://mp-251b8a98-d3c2-4db4-a13b-b664f8d59624.cdn.bspapp.com/common/bg.png')
	const radioChange = (e) => {
		isAgree.value = !isAgree.value
	}
	const wxlogin = () => {
		if (!isAgree.value) {
			uni.showToast({
				title: "请先同意协议",
				icon: 'error'
			})
			return
		}
		uni.showModal({
			title: "使用微信一键登录",
			showCancel: true,
			cancelColor: "#000000",
			confirmColor: "#42b983",
			success: (success) => {
				if (success.confirm) {
					uni.showLoading({
						title: '登录中...'
					})
					uni.getUserProfile({
						desc: '获取用户信息，进行登录',
						success: (res) => {
							//调用登录函数
							getLogin(res.userInfo)
						}
					})
				}
				if (success.cancel) {
					uni.showToast({
						title: '用户取消登录!',
						icon: 'none',
						duration: 2000
					});
				}


			}
		})
	}
	const getLogin = (userInfo) => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				let code = res.code
				uniCloud.callFunction({
					name: 'login',
					data: {
						code: res.code,
						nickName: userInfo.nickName,
						avatarUrl: userInfo.avatarUrl,
						gender: userInfo.gender
					}
				}).then(res_ => {
					if (res_.result.affectedDocs != 0) {
						uni.setStorageSync('Token', res_.result.data[0].token)
						uni.showToast({
							title: '登陆成功',
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading()
						setTimeout(() => {
							uni.$emit('login')
							uni.switchTab({
								url: '/pages/my/my',
							})
						}, 1000)

					} else {
						uni.showToast({
							title: '登陆失败',
							icon: 'none',
							duration: 2000
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: '登陆失败',
						icon: 'none',
						duration: 2000
					})
				})
			}
		})
	}
	const gotoUser = () => {
		uni.navigateTo({
			url: '/pages/userAgreement/userAgreement'
		})
	}
	const gotoPrivacy = () => {
		uni.navigateTo({
			url: '/pages/privacy/privacy'
		})
	}
</script>

<style lang="scss">
	.bg {
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		background-color: #fff;

		.title {
			position: fixed;
			font-size: 60rpx;
			font-weight: bold;
			top: 50%;
			left: 10%;
		}

		.image {
			position: fixed;
			width: 100%;
			height: 50%;
		}

		.user {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			color: #fff;
			background-color: #0ED168;
			width: 80%;
			height: 5%;
			position: fixed;
			bottom: 30%;

			.wximage {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				margin-left: 10rpx;
				font-weight: bold;
			}
		}

		.tips {
			position: fixed;
			display: flex;
			align-items: center;
			bottom: 5%;
			font-size: 24rpx;
			color: #afafaf;

			.btn {
				color: #0ED168;
			}

			
		}
	}
</style>